<template>
	<div class="newsinfo-container">
		<!-- 直接得到 id 的写法 -->
		<!-- <h3>新闻详情；id 为 ：{{ $route.params.id }}</h3> -->
		<!-- 从 data 中得到 id 的写法 -->
		<!-- <h3>新闻详情；id 为 ：{{ id }}</h3> -->

		<!-- 自己写新闻详情页面： -->

		<!-- 大标题 -->
		<h3 class="title">{{ newsinfob.title }}</h3>

		<!-- 子标题 -->
		<p class="subtitle">
			<span>发表时间：{{ newsinfob.add_time | dateFormat }}</span>
			<span>点击次数：{{ newsinfob.click }}次</span>
		</p>
		<hr>
		<!-- 内容区 -->
		<div class="content" v-html="newsinfob.content"></div>

		<!-- 评论区 -->
		<comment-box :id="this.id"></comment-box>
	</div>
</template>

<script>
	// 1.1 导入评论子组件
	import comment from '../subcomponents/comment.vue'

	// 按需求导入 Toast 样式
	import { Toast } from 'mint-ui'

	export default {
		data(){
			return{
				// 将 URL 地址中传递过来的 id 值挂载到 data 上方便调用
				id:this.$route.params.id,
				// 真新闻数据，一般是带 HTML 标签的内容
				newsinfo:{},
				// 假新闻数据
				newsinfob:{},
				newslistb:[
					{
						title:"1季度多家房企利润跌幅超50%，去库存促销战打响！",
						add_time:"2020-12-25T11:11:11.000Z",
						click:111,
						content:"<p>aaa</p><p>bbb</p><p>aaa</p><p>bbb</p><img src='http://localhost:3000/public/img/img01.jpg'>"
					},
					{
						title:"1季度多家房企利润跌幅超50%，去库存促销战打响！",
						add_time:"2020-12-25T11:11:11.000Z",
						click:112,
						content:"<p>aaa</p><p>bbb</p><p>aaa</p><p>bbb</p>"
					},
					{
						title:"1季度多家房企利润跌幅超50%，去库存促销战打响！",
						add_time:"2020-12-25T11:11:11.000Z",
						click:113,
						content:"<p>aaa</p><p>bbb</p><p>aaa</p><p>bbb</p>"
					},
					{
						title:"1季度多家房企利润跌幅超50%，去库存促销战打响！",
						add_time:"2020-12-25T11:11:11.000Z",
						click:114,
						content:"<p>aaa</p><p>bbb</p><p>aaa</p><p>bbb</p>"
					},
					{
						title:"1季度多家房企利润跌幅超50%，去库存促销战打响！",
						add_time:"2020-12-25T11:11:11.000Z",
						click:115,
						content:"<p>aaa</p><p>bbb</p><p>aaa</p><p>bbb</p>"
					},
					{
						title:"1季度多家房企利润跌幅超50%，去库存促销战打响！",
						add_time:"2020-12-25T11:11:11.000Z",
						click:116,
						content:"<p>aaa</p><p>bbb</p><p>aaa</p><p>bbb</p>"
					},
					{
						title:"1季度多家房企利润跌幅超50%，去库存促销战打响！",
						add_time:"2020-12-25T11:11:11.000Z",
						click:117,
						content:"<p>aaa</p><p>bbb</p><p>aaa</p><p>bbb</p>"
					},
					{
						title:"1季度多家房企利润跌幅超50%，去库存促销战打响！",
						add_time:"2020-12-25T11:11:11.000Z",
						click:118,
						content:"<p>aaa</p><p>bbb</p><p>aaa</p><p>bbb</p>"
					},
					{
						title:"1季度多家房企利润跌幅超50%，去库存促销战打响！",
						add_time:"2020-12-25T11:11:11.000Z",
						click:119,
						content:"<p>aaa</p><p>bbb</p><p>aaa</p><p>bbb</p>"
					},
					{
						title:"1季度多家房企利润跌幅超50%，去库存促销战打响！",
						add_time:"2020-12-25T11:11:11.000Z",
						click:120,
						content:"<p>aaa</p><p>bbb</p><p>aaa</p><p>bbb</p>"
					},
					{
						title:"1季度多家房企利润跌幅超50%，去库存促销战打响！",
						add_time:"2020-12-25T11:11:11.000Z",
						click:121,
						content:"<p>aaa</p><p>bbb</p><p>aaa</p><p>bbb</p>"
					},
					{
						title:"1季度多家房企利润跌幅超50%，去库存促销战打响！",
						add_time:"2020-12-25T11:11:11.000Z",
						click:122,
						content:"<p>aaa</p><p>bbb</p><p>aaa</p><p>bbb</p>"
					}
				]
			}
		},
/*
		created(){
			this.getNewsInfo()
		},
*/

		created(){
			this.getNewsInfob()
		},

		methods:{
			// 获取新闻详情

			// 真请求方法
			getNewsInfo(){
				this.$http.get('getnews/' + this.id).then(result => {
					console.log(result)
					if(result.status === 200){
						// 请求数据成功
						Toast('获取新闻成功！！')
						this.newsinfoa = result.body[0]
					} else {
						// 请求数据失败
						Toast('获取新闻失败！！')
					}
				})
			},
			// 假请求方法
			getNewsInfob(){
				this.newsinfob = this.newslistb[this.id-11]
			}
		},
		// 用来注册子组件的节点
		components:{
			// 1.2 注册评论子组件并起组件名
			'comment-box':comment
		}
	}
</script>

<style lang="scss">
	.newsinfo-container{
		padding: 0 4px;
		.title{
			font-size: 16px;
			text-align: center;
			margin:15px 0;
			color: red;
		}
		.subtitle{
			font-size: 13px;
			color: #226aff;
			display: flex;
			justify-content: space-between;
		}
		.content{
			img{
				width: 100%;
			}
		}
	}
</style>